<template>
    <div class="song-audio">
        <audio 
        ref="player" 
        :src="url" 
        controls="controls"
        preload="preload"
        @canplay="startPlay"
        @ended="ended"
        @timeupdate="timeupdate">
        </audio>
        
    </div>

</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name: 'song-audio',
    computed: {
        ...mapGetters([
            'id',
            'url',
            'isPlay',
            'currentTime',
            'musicTotalTime',
            'newCurrentTime',
            'volume',
            'mode',
            'listSong',
            'musicIndex'

        ])
    },
    watch: {
        isPlay: function () {
            this.togglePlay();
        },
        musicTotalTime: function (){
            this.changeTotal();
        },
        newCurrentTime: function (){
            this.changeCurrentTime();
        },
        volume : function (){
            this.changeVolume();
        }  
    },
    methods: {
        startPlay() {
            let player = this.$refs.player
            this.getVideo()
            if(this.isPlay){
                player.play();
            }
        },
        ended() {
            this.isPlay = false;
            this.$store.commit('setType', 'off')
            //单曲循环
            if(this.mode === 'playOnce'){
            this.$store.commit('setCurrentTime',0)
            this.$store.commit('setIsPlay', true)
            this.$store.commit('setType', 'on')
            let player = this.$refs.player
            player.play();
            }
            //列表循环
            if(this.mode === 'loopOnce'){
                if(this.musicIndex != -1 && this.listSong.length > 1){
          
                if(this.musicIndex  === this.listSong.length - 1){
                    this.$store.commit('setUrl', this.listSong[0].url)
                    this.$store.commit('setIsPlay', true)
                    this.$store.commit('setType', 'on')
                    this.$store.commit('setMusicTotalTime',this.listSong[0].musictotaltime)
                    this.$store.commit('setMusicImg',this.listSong[0].musicImg)
                    this.$store.commit('setSingerName',this.listSong[0].singerName)
                    this.$store.commit('setSongName',this.listSong[0].songName)
                    this.$store.commit('setMusicIndex',0)
                }else{
                    this.$store.commit('setUrl', this.listSong[this.musicIndex+1].url)
                    this.$store.commit('setIsPlay', true)
                    this.$store.commit('setType', 'on')
                    this.$store.commit('setMusicTotalTime',this.listSong[this.musicIndex+1].musictotaltime)
                    this.$store.commit('setMusicImg',this.listSong[this.musicIndex+1].musicImg)
                    this.$store.commit('setSingerName',this.listSong[this.musicIndex+1].singerName)
                    this.$store.commit('setSongName',this.listSong[this.musicIndex+1].songName)
                    this.$store.commit('setMusicIndex',this.musicIndex+1)
                }
          
        } 
            }
            //随机播放
            if(this.mode === 'shuffleOne'){
                if(this.musicIndex != -1 && this.listSong.length > 1){
                let num = parseInt(Math.random() * this.listSong.length) 
                this.$store.commit('setUrl', this.listSong[num].url)
                this.$store.commit('setIsPlay', true)
                this.$store.commit('setType', 'on')
                this.$store.commit('setMusicTotalTime',this.listSong[num].musictotaltime)
                this.$store.commit('setMusicImg',this.listSong[num].musicImg)
                this.$store.commit('setSingerName',this.listSong[num].singerName)
                this.$store.commit('setSongName',this.listSong[num].songName)
                this.$store.commit('setMusicIndex',num)
                }
            }
        },
        //开始暂停5
        togglePlay() {
            let player = this.$refs.player
            if (this.isPlay) {
                player.play();
            } else {
                player.pause();
            }
        },
        getVideo() {
            let player = this.$refs.player
            player.volume = this.volume;
        },
        //监听音乐实时播放的时间
        timeupdate(){
            let player = this.$refs.player
            this.$store.commit('setCurrentTime',player.currentTime)
            this.$store.commit('setVolume',player.volume)
        },
        changeTotal(){
            const audio = new Audio(this.url)
            audio.load()
            audio.oncanplay = () => {
                let total = parseInt(audio.duration)
                this.$store.commit('setTotal',total)
            }
        },
        changeCurrentTime(){
            let player = this.$refs.player
            player.currentTime = this.newCurrentTime;
        },
        changeVolume(){
            let player = this.$refs.player
            player.volume = this.volume;
        }
    }
}

</script>

<style>
.song-audio {
    display: none;
}

</style>